<!-- 对话框组件 -->
<script setup>
const props = defineProps({
    visible: {type: Boolean, default: false},
    title: {type: String, default: '修改数据'},
    slotType: {type: String, default: 'edit'},
})

// 向父组件发送事件
const emit = defineEmits(['update:visible', 'submitEditData', 'submitRemoveData'])

const handleClose = () => emit('update:visible', false)

const handleSubmitEvent = () => {
    if (props.slotType === 'edit') {
        emit('submitEditData')
    }
    if (props.slotType === 'remove') {
        emit('submitRemoveData')
    }
}

</script>

<template>
    <el-dialog :model-value="visible" :title="title" width="500">
        <slot name="modify"></slot>
        <slot name="remove"></slot>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button v-if="slotType === 'edit'" type="primary" @click="handleSubmitEvent">提交修改
                </el-button>
                <el-button v-else type="danger" @click="handleSubmitEvent">删除</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<style scoped lang="scss">

</style>
